<template>
    <div class="main">
        <el-row class="top">
            <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
                <div class="topCardBox">
                    <div class="topCard">
                        <el-icon :size="75" color="#8BC6C3">
                            <Grid />
                        </el-icon>
                        <div class="topCardText">
                            <p>商品数量</p>
                            <count-to :startVal="start" :endVal="goodsCount" :duration="500"></count-to>
                        </div>
                    </div>
                    <div class="topCard">
                        <el-icon :size="75" color="#55A0E5">
                            <ChatDotSquare />
                        </el-icon>
                        <div class="topCardText">
                            <p>未发货单</p>
                            <count-to :startVal="start" :endVal="waitStockCount" :duration="500"></count-to>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
                <div class="dayOrders" id="dayOrders"/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
                <div class="dayAmount" id="dayAmount" />
            </el-col>
            <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <div class="pieChart" id="areaOrders" />
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <div class="pieChart" id="wayOrders" />
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { get } from '@/utils/https'
import { onMounted, reactive, ref, nextTick, computed, watch, onUnmounted } from 'vue'
import { CountTo } from 'vue3-count-to';
import * as echarts from 'echarts';
import { dispose } from 'echarts';
type EChartsOption = echarts.EChartsOption;

const start = ref(0);
let goodsCount = ref(0)
let waitStockCount = ref(0)

let getEcharts = (data: any) => {
    // 訂單柱状图
    var dayOrdersChartDom = document.getElementById('dayOrders')!;
    // echarts.init(document.getElementById('dayOrders')!).dispose();
    dayOrdersChartDom.removeAttribute('_echarts_instance_');
    var dayOrdersChart = echarts.init(dayOrdersChartDom);
    var dayOrdersOption: EChartsOption;
    dayOrdersOption = {
        title: [
            {
                text: '七日订单'
            }
        ],
        legend: {
            left: "right",
            data: ['订单数']
        },
        xAxis: {
            type: 'category',
            data: data.daysOrder[0],
            // name: '订单数'
        },
        yAxis: {
            name: '订单数'
        },
        series: [
            {
                name: '订单数',
                data: data.daysOrder[1],
                type: 'bar'
            }
        ]
    }
    console.log(dayOrdersOption, 'dayOrdersOption');
    // echarts.init(dayOrdersChartDom!).dispose();
    dayOrdersOption && dayOrdersChart.setOption(dayOrdersOption);
    // 折线图
    var dayAmountChartDom = document.getElementById('dayAmount')!;
    dayAmountChartDom.removeAttribute('_echarts_instance_');

    var dayAmountChart = echarts.init(dayAmountChartDom);
    var dayAmountOption;
    dayAmountOption = {
        title: [
            {
                text: '七日成交金额'
            }
        ],
        legend: {
            left: "right",
            data: ['订单数']
        },
        xAxis: {
            type: 'category',
            data: data.daysSum[0],
        },
        yAxis: {
            name: '订单数',
        },
        series: [
            {
                name: '订单数',
                data: data.daysSum[1],
                type: 'line'
            }
        ]
    };
    dayAmountOption && dayAmountChart.setOption(dayAmountOption);
    // 饼图1
    var areaOrdersChartDom = document.getElementById('areaOrders')!;
    areaOrdersChartDom.removeAttribute('_echarts_instance_');

    var areaOrdersChart = echarts.init(areaOrdersChartDom);
    var areaOrdersOption;
    areaOrdersOption = {
        title: {
            text: '订单地区分布',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right',
        },
        series: [
            {
                name: '地区分布',
                type: 'pie',
                radius: '50%',
                data: data.area,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    areaOrdersOption && areaOrdersChart.setOption(areaOrdersOption);
    // 饼图2
    var wayOrdersChartDom = document.getElementById('wayOrders')!;
    wayOrdersChartDom.removeAttribute('_echarts_instance_');

    var wayOrdersChart = echarts.init(wayOrdersChartDom);
    var wayOrdersOption;
    wayOrdersOption = {
        title: {
            text: '订单渠道分布',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right'
        },
        series: [
            {
                name: '地区分布',
                type: 'pie',
                radius: '50%',
                data: data.channel,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    wayOrdersOption && wayOrdersChart.setOption(wayOrdersOption);

    //根据窗口的大小变动图表 
    window.onresize = function () {
        dayOrdersChart.resize();
        dayAmountChart.resize();
        areaOrdersChart.resize();
        wayOrdersChart.resize();
    }
}
// 获取初始化数据
let getInit = () => {
    let data = {
        _gp: 'admin.dashboard',
        _mt: 'integral',
    }
    get(data).then((res) => {
        const { errno, errmsg, data } = res
        if (200 == errno) {
            console.log(data);
            goodsCount.value = data.goodsCount
            waitStockCount.value = data.waitStockCount
            getEcharts(data)
        } else {
            console.log(errmsg);
        }
    })
}
onMounted(() => {
    getInit()
})

</script>

<style lang="less">
.main {
    margin: 20px;
    background-color: azure;
    height: 85vh;
}

.dayOrders {
    width: 100%;
    height: 400px;
}

.dayAmount {
    height: 350px;
}

.topCardBox {
    width: 100%;

    .topCard {
        margin: auto;
        height: 80px;
        margin-bottom: 20px;
        // width: 200px
        width: 50%;
        background-color: white;
        display: flex;
        justify-content: space-around;
        padding: 35px;
    }

    .topCardText {
        width: 100px;
        height: 75px;
        // background-color: aqua;

        overflow: hidden;
        white-space: nowrap;

        // text-overflow: ellipsis;
        // -o-text-overflow: ellipsis;
        p {
            line-height: 35px;
        }
    }
}

.pieChart {
    width: 100%;
    height: 300px;
}
</style>

